/*
  学习目标：受控组件-hooks版本
  步骤：
     1. state控制value或checked属性
     2. onChange配合setState修改数据

  了解-自定义hooks
*/

import React, { useState } from 'react';

function useXxx() {
  const [value, setValue] = useState('');
  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return {
    value,
    onChange: handleChange,
  };
}

export default function App() {
  const name = useXxx();
  const intro = useXxx();

  return (
    <div>
      <input type="text" value={name.value} onChange={name.onChange} /> <br />
      {/* {...name} 相当于把对象name的所有属性， 复制到input标签上 */}
      {/* 上下两个代码等效 */}
      <input type="text" {...name} /> <br />
      <textarea type="text" {...intro} /> <br />
    </div>
  );
}
